<template>
  <div class="swper-content">
    <div class="swper-main">
      <div class="swper-tu">
        <el-carousel type="card" height="300px" autoplay>
          <el-carousel-item v-for="img in imgs" :key="img.id">
            <img :src="img.imgUrl" class="lunbo-img" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>
el-carousel__indicator el-carousel__indicator--horizontal is-active
<script>
export default {
  name: "SwperA",
  data() {
    return {
      imgs: [
        {
          id: "1",
          imgUrl: "../image/lunbo.webp",
        },
        {
          id: "2",
          imgUrl: "../image/lunbo2.webp",
        },
        {
          id: "3",
          imgUrl: "../image/lunbo3.webp",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.swper-content {
  background-image: url(../../image/background.png);
  background-position: center top;
  background-size: 100% 100%;
  overflow: hidden;
  height: 500px;
  position: relative;
}
.swper-tu {
  width: 1160px;
  height: 400px;
  margin: 0 70px;
  position: absolute;
  top: 100px;
  left: 100px;
}
.img {
  width: 1160px;
  height: 300px;
  position: absolute;
  border-radius: 5px;
}

.el-carousel__item {
  width: 80%;
}
</style>
